<template>


    <el-dialog v-model="dialogVisible" width="800">
        <el-form :model="form">
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-select v-model="form.roleId" placeholder="请选择角色" clearable style="width: 180px">
                    <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchRole">搜索</el-button>
                <el-button type="warning" style="margin-left: 10px" @click="clearSelection">
                    清空选择
                </el-button>
            </el-form-item>
        </el-form>


        <el-table :data="userList" border ref="userTableRef" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="150" />
            <el-table-column property="name" label="姓名" width="200" />
            <el-table-column property="code" label="员工编号" />
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirmSelection">
                    确认
                </el-button>
                <el-button @click="handleClose">取消</el-button>
            </div>
        </template>
    </el-dialog>


</template>

<script setup>
/* eslint-env vue/setup-compiler-macros */
import { reactive, ref, watch } from 'vue'

const formLabelWidth = '80px'

const props = defineProps({
    visible: {
        type: Boolean,
        required: true
    },
})

const emit = defineEmits(['update:visible', 'confirm'])

const dialogVisible = ref(false)

watch(
    () => props.visible,
    (newVal) => {
        dialogVisible.value = newVal
    },
    { immediate: true }
)

watch(dialogVisible, (newVal) => {
    emit('update:visible', newVal)
})

const form = reactive({
    roleId: null
})

// 员工表
const users = [
    { id: 1, name: '张三', code: 'ERP001', roleId: 1 },
    { id: 2, name: '李四', code: 'ERP002', roleId: 1 },
    { id: 3, name: '王五', code: 'ERP003', roleId: 1 },
    { id: 4, name: '赵六', code: 'ERP004', roleId: 2 }
]

// 角色表
const roles = [
    { id: 1, name: '销售人员' },
    { id: 2, name: '采购人员' },
]

const userList = ref([]) // 初始显示全部

const selectedUsers = ref([])

const handleSelectionChange = (selection) => {
    selectedUsers.value = selection
}

const userTableRef = ref()

const searchRole = () => {
    if (form.roleId === -1 || form.roleId === '') {
        // 显示全部员工（可选）
        userList.value = [...users]
    } else {
        // 根据 roleId 过滤
        userList.value = users.filter(user => user.roleId === form.roleId)
    }
    clearSelection() // 每次搜索后清空已选项（推荐）
}
const clearSelection = () => {
    selectedUsers.value = []
    userTableRef.value?.clearSelection()
}

const confirmSelection = () => {
    emit('confirm', selectedUsers.value)
    handleClose()
}

const handleClose = () => {
    emit('update:visible', false)
}
</script>